const Pager = require('../../components/aotoo/core/index')
const lib = Pager.lib

module.exports = function mkDropdown(params) {
  let dft = {
    id: lib.suid('dd-'),
    listClass: 'dropdown-tab',
    itemClass: 'dropdown-item',
    menus: [],
    contents: [],
    footer: {},       //用于存放按钮
    type: 'radio',
    mask: true,
    maskBg: 'rgba(0,0,0,0.4)',
    itemWidth: '',
    aysncItem: false
  }

  let opts = Object.assign({}, dft, params)
  opts.data = adapter(opts)

  opts.listClass = opts.listClass.indexOf('dropdown-tab') <= 0 ? ('dropdown-tab '+ opts.listClass) : opts.listClass
  opts.itemClass = opts.itemClass.indexOf('dropdown-item') <= 0 ? ('dropdown-item '+ opts.itemClass) : opts.itemClass

  return {
    $$id: opts.$$id || opts.id,
    data: opts.data,
    listClass: opts.listClass,
    itemClass: opts.itemClass,
    listStyle: opts.itemWidth ? `--itemWidth: ${opts.itemWidth}` : 'flex: 1',
    footer: opts.contents.length === 0 ? {...maskAdapter({}, 'ss', opts.mask, opts.maskBg)} : '',
    methods: {
      onClick(e, params, inst) {
        const that = this
        const idx = params.idx
        if (!inst.hasClass('active')) {
          inst.addClass('active')
          inst.siblings().removeClass('active')
        }
        else {
          inst.removeClass('active')
        }
        if (opts.aysncItem) {
          this.hooks.emit('updateContent', {idx: idx})
        }
        // that.find('screen-pop-content-'+idx).addClass('active')
      },
      onSelfClose(e, params, inst) {
        //内部使用
        inst.parent().removeClass('active')
        inst.parent().parent().removeClass('active')
      },
      onClose(params) {
        //外部使用 
        const _vals = params.vals
        const _parentId = params.parentId
        // if (_parentId) {
        //   this.find('screen-pop-content-'+_parentId).removeClass('active')
        // }
        if (_vals) {
          this.find('screen-item-'+_parentId).removeClass('active')
          this.find('screen-item-'+_parentId).addClass('chekced')
          this.find('screen-item-'+_parentId).update({[`title.@item.title`]: _vals})
        }
        else {
          this.find('screen-item-'+_parentId).reset()
        }
      }
    }
  }
}

const maskAdapter = (data, ii, mask, maskBg) => {
  return {
    '@item': {
      $$id: 'screen-pop-content-'+ii,
      '@list': data ? data : {},
      dot: [{
        title: ' ',
        itemClass: 'dropdown-mask',
        aim: 'onSelfClose',
        itemStyle: mask ? `--maskBg: ${maskBg}` : ''
      }],
      itemClass: 'dropdown-pop'
    }
  }
}

const adapter = (params) => {
  const menusData = params.menus
  const contentData = params.contents
  const mask = params.mask
  const maskBg = params.maskBg

  return menusData.map((item, ii) => {
    return contentData.length > 0 ? {
      $$id: 'screen-item-'+ii,
      title: {
        '@item': {
          title: item.title,
          itemClass: ' textellipsis-1'
        },
        itemClass: 'item-title'
      },
      ...maskAdapter(contentData[ii], ii, mask, maskBg),
      aim: 'onClick?idx='+ii
    } : {
      // title: {
      // },
      title: item.title,
      iteClass: 'item-title textellipsis-1',
      aim: 'onClick?idx='+ii
    }
  })
}